//存储商品列表
var arr = [];
//存储购物车
var cartArr = [];

//页面加载数据
window.onload = function() {
	//渲染arr
	showGoodsList(getLocalGoodsListData());
	//渲染本地购物车
	render(getLocalCartData());
}

//获取本地购物车
function getLocalCartData() {
	cartArr = localStorage.cartArr ? JSON.parse(localStorage.cartArr) : [];
	return cartArr;
}

//获取本地商品数据
function getLocalGoodsListData() {
	arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
	return arr;
}

//传入的商品渲染到页面
function showGoodsList(arr) {
	var list_ul = document.querySelector('.list_ul');
	list_ul.innerHTML = '';
	for (var i = 0; i < arr.length; i++) {
		list_ul.innerHTML +=
			`
				<li data-id="${ arr[i].goodsid }">
					<img src="${ arr[i].image }" >
					<div class="good_title mt5">
						${ arr[i].name }
					</div>
					<div class="price mt5">
						${ arr[i].price }元
					</div>
					<button type="button" class="btn_add mt5" onclick='addCart("${ arr[i].goodsid }","${ arr[i].image }","${ arr[i].name }","${ arr[i].price }")'>
						加入购物车
					</button>
				</li> 
			`;
	}
}


//添加到购物车
function addCart(goodsId, img, goodsName, price) {
	var count = 1;
	var xiaoji = price / 1 * count;
	var obj = {
		id: goodsId,
		src: img,
		title: goodsName,
		price: price,
		count: count,
		xiaoji: xiaoji.toFixed(2),
		time: new Date().toLocaleString()
	}
	addData(obj);
}

//添加购物车并渲染
function addData(obj) {
	var cartArr = getLocalCartData();
	var result = cartArr.some(function(item, index) {
		return item.id === obj.id;
	})
	if (result) {
		jia(obj.id);
		return;
	}
	cartArr.push(obj);
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}

//渲染到购物车列表
function render(cartArr) {
	var tbody = document.querySelector('tbody');
	tbody.innerHTML = '';
	var str = '';
	var sum = 0;
	for (var i = 0; i < cartArr.length; i++) {
		str +=
			`
		    <tr>
		    	<td>
					<input type="checkbox" class="danxuan" data-id="${cartArr[i].id}"/>
				</td>
				<td>
					<p>
						<img src="${cartArr[i].src}" >
						<br>
						<span>${cartArr[i].title}</span>
					</p>
				</td>
				<td>
					<button type="button" class="btn" onclick="jian('${cartArr[i].id}')">-</button>
					<input disabled type="number" value="${cartArr[i].count}" class="count"/>
					<button type="button" class="btn" onclick="jia('${cartArr[i].id}')">+</button>
				</td>
				<td>
					<span>${cartArr[i].price}元</span>
				</td>
				<td>
					${cartArr[i].xiaoji}
				</td>
				<td>
					<button type="button" onclick="del('${cartArr[i].id}')">删除</button>
				</td>
				<td>
					${cartArr[i].time}
				</td>
		    </tr>
		`
		sum = sum / 1 + cartArr[i].xiaoji / 1;
	}
	tbody.innerHTML = str;
	document.getElementById('sum').innerHTML = sum;
}

//加
function jia(id) {
	cartArr = getLocalCartData();
	cartArr.forEach(function (item, i) {
		if (item.id === id) {
			item.count++;
			item.xiaoji = (item.count * item.price).toFixed(2);
		}
	});
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}

//减
function jian(id) {
	cartArr = getLocalCartData();
	cartArr.forEach(function(item, i) {
		if (item.id === id) {
			if (item.count > 1) {
				item.count--;
				item.xiaoji = (item.count * item.price).toFixed(2);
			}
		}
	});
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}

//删除
function del (id) {
	cartArr = getLocalCartData();
	cartArr = cartArr.filter(function (item,i) {
		return item.id !== id;
	});
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}

//全选
var quanxuan = document.getElementsByClassName('quanxuan')[0];
quanxuan.onclick = function () {
	var danxuanList = document.querySelectorAll('.danxuan');
	for (let i = 0;i < danxuanList.length;i++) {
		danxuanList[i].checked = quanxuan.checked;
	}
}

//全删
var clears = document.getElementById('clears');
clears.onclick = function () {
	cartArr = getLocalCartData();
	var danxuanList = document.querySelectorAll('.danxuan:checked');
	for (let i = 0; i < danxuanList.length; i++) {
		cartArr.forEach(function (item,index) {
			if (item.id === danxuanList[i].getAttribute('data-id')) {
				cartArr.splice(index,1);
			}
		});
	}
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}